import Taro, { Component } from '@tarojs/taro';
import { View, ScrollView, Image, Text } from '@tarojs/components';
import { DNavBar, DTabs, DItemError } from '@/components';
import { AtSearchBar } from 'taro-ui'
import './index.scss';
import http from '@/api'

export default class InventoryManage extends Component {
  state = {
    titleIcon: require('@/assets/images/inventory_icon.png'),
    rightArrowIcon: require('@/assets/images/right_arrow_icon.png'),
    tabs: [{
      name: '已盘库',
      value: 2
    }, {
      name: '已处理',
      value: 9
    }],
    list: [],
    tabIndex: 2,
    totalPage: 0,
    form: {
      page: 1,
      limit: 10
    },
    inputVal: '',
    searchVal: ''
  }
  componentDidShow() {
    this.getStocktakingList()
  }
  onScrollToLower = () => {
    this.setState({ form: {
      ...this.state.form,
      page: this.state.form.page + 1
    }}, this.getStocktakingList)
  }
  getStocktakingList() {
    const { form, tabIndex: status } =  this.state

    if (form.page != 1 && form.page > this.state.totalPage) return

    http.getinventoryAdvance({ ...form }).then( res => {
      if (form.page === 1) {
        this.setState({ list: res.panKuDianZi, totalPage: res.pageParameter.totalPage}, () => {
          console.log(this.state.list)
        })
      } else {
        this.setState({ list: [...this.state.list, ...res.panKuDianZi], totalPage: res.pageParameter.totalPage })
      }
    })
  }
  // 获取地区
  getRegion(n) {
    let arr = ['', '肇庆', '清远', '韶关', '佛山', '惠州', '广州', '东莞', '深圳', '江门', '湛江', '梅州', '茂名', '阳江', '河源', '云浮']
    return arr[n]
  }
  handleTabClick = (index) => {
    this.setState({
      tabIndex: index,
      list: [],
      form: {
        ...this.state.form,
        page: 1
      }
    }, this.getStocktakingList)
  }
  handleItemClick = (id) => {
    Taro.navigateTo({ url: '/pages/historyOrder/detail?id=' + id })
  }
  handleStatusText(status) {
    return {
      0: '待审核',
      1: '审核通过',
      2: '审核不通过',
      3: '待盘库',
      4: '盘库完成',
      6: '订单完成',
      7: '资料不全',
      }[status]
  }
  searchValChange = (val) => {
    this.setState({ searchVal: val.trim() })
  }
  onClear = () => {
    let form = this.state.form
    this.setState({ searchVal: '' }, this.getStocktakingList)
  }
  onActionClick = () => {
    console.log(this.state.searchVal)
    this.setState({
      form: {
        ...this.state.form,
        page: 1,
        otherUserName: this.state.searchVal
      }
    }, this.getStocktakingList)
  }

  render() {
    const { tabs, list, tabIndex, titleIcon, rightArrowIcon, searchVal } = this.state;

    return (
      <View className="inventory-manage">
        <DNavBar title="垫资及盘库-历史订单"></DNavBar>

        <AtSearchBar value={searchVal}
                     maxLength={80}
                     onChange={this.searchValChange}
                     onActionClick={this.onActionClick}
                     onClear={this.onClear}
                      placeholder='请输入车商名称查询'
                      />


        <ScrollView scrollY className="inventory-manage__body" onScrollToLower={this.onScrollToLower}>
          {
            list.map((item, index) => (
              <View className="list-item list-item--style" onClick={() => this.handleItemClick(item.order.id)}>
                <View className="list-item__title">
                  {/* <Image src={titleIcon} className="list-item__title__icon"></Image> */}
                  <Text className="list-item__title__text">{index + 1}.&nbsp;&nbsp;</Text>
                  <Text className="list-item__title__text">{item.loginMessage.otherUserName}({this.getRegion(item.loginMessage.region)})</Text>
                  {
                    <View className={['list-item__title__tag', item.order.orderState == 4 ? 'pass' : 'no-pass'].join(' ')}>
                      <Text>{this.handleStatusText(item.order.orderState)}</Text>
                    </View>
                  }
                </View>
                <View className="list-item__info">
                  <View className="list-item__info__text">客户：{item.order.customerName}</View>
                  <View className="list-item__info__text">车型：{item.order.carType}</View>
                  <View className="list-item__info__text">申请日期：{item.order.applyDate}</View>
                </View>
				</View>
            ))
          }
          {
            list.length === 0 && <DItemError type={searchVal ? 2 : 1}></DItemError>
          }
        </ScrollView>
      </View>
    )
  }
}
